<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web animations API frames example</title>
    <style>
      body {
        margin: 0;
      }

      div {
        position: relative;
        width: 0%;
        height: 200px;
        background: red;
      }

      p {
        position: absolute;
        width: 250px;
        top: 10px;
        left: 10px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <p>transition-timing-function: steps(5)</p>
      <p></p>
    </div>
    <div class="div2">
      <p>transition-timing-function: steps(10);</p>
      <p></p>
    </div>
    <div class="div3">
      <p>transition-timing-function: ease-in;</p>
      <p></p>
    </div>

    <script>
      var easingFunctions = ["steps(5)", "steps(10)", "ease-in"];

      var keyFrames = [
        { width: "0%", background: "red" },
        { width: "100%", background: "blue" },
      ];

      var divs = document.querySelectorAll("div");

      for (var i = 0; i < divs.length; i++) {
        divs[i].animate(keyFrames, {
          easing: easingFunctions[i],
          duration: 5000,
          iterations: Infinity,
        });
      }
    </script>
  </body>
</html>
